<template>
  <div class="pageMixin-container">
    <!-- 标题区域 -->
    <div class="head-container">
      <h1>会员管理</h1>
    </div>
    <!-- 功能区域 -->
    <div class="search-container">
      <el-button type="primary" @click="handleOpenModal(null)">
        新增会员
      </el-button>
      <el-form :inline="true" :model="pageSearch">
        <el-form-item label="">
          <el-input v-model="pageSearch.name" placeholder="请输入搜索名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlePageInit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 数据展示区域 -->
    <div class="table-container">
      <el-table :data="pageData" v-loading="pageInfo.loading">
        <el-table-column prop="id" label="id" width="140"></el-table-column>
        <el-table-column prop="realName" label="会员名称"></el-table-column>
        <el-table-column prop="address" label="会员地址"></el-table-column>
        <el-table-column prop="phone" label="联系方式"></el-table-column>
        <el-table-column prop="referencePhone" label="推荐人手机号" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.referencePhone ? scope.row.referencePhone : "--" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="bankDeposit" label="开户行"></el-table-column>
        <el-table-column align="center" prop="memberLevel" label="会员等级"></el-table-column>

        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <div>
              <el-button type="info" size="mini" @click="handleOpenModal(scope.row)">
                修改
              </el-button>
              <el-button type="danger" size="mini" @click="handleRemove(scope.row)">
                删除
              </el-button>
              <el-dropdown @command="(command) => {
                handleCommand(command, scope.row);
              }
                ">
                <el-button style="margin-left: 10px" size="mini">
                  更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="runningWater">查看流水</el-dropdown-item>
                  <el-dropdown-item command="level">设置会员等级</el-dropdown-item>
                  <el-dropdown-item command="business">提升为商家</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination @size-change="handlePageSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="pageInfo.currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pageInfo.pageSize"
        layout="sizes, prev, pager, next" :total="pageInfo.total" background>
      </el-pagination>
    </div>
    <el-dialog :title="formData.id ? '修改会员' : '添加会员'" :visible.sync="editModalShow" width="560px">
      <el-form class="edit-modal-form" :model="formData" :rules="rules" ref="aForm" label-width="100px">
        <el-form-item label="会员名称" prop="realName">
          <el-input v-model="formData.realName" placeholder="请输入会员名称"></el-input>
        </el-form-item>
        <el-form-item label="会员地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入会员地址"></el-input>
        </el-form-item>
        <el-form-item label="商铺归属人" prop="realName">
          <el-input v-model="formData.realName" placeholder="请输入商铺归属人"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item label="银行开户行" prop="bankDeposit">
          <el-input v-model="formData.bankDeposit" placeholder="请输入银行开户行"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号" prop="bankNumber">
          <el-input v-model="formData.bankNumber" placeholder="请输入银行卡号"></el-input>
        </el-form-item>
        <el-form-item label="推荐人手机号" prop="referencePhone">
          <el-input v-model="formData.referencePhone" placeholder="请输入推荐人手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="referencePhone">
          <el-input v-model="formData.password" placeholder="为空则不修改密码"></el-input>
        </el-form-item>
        <el-form-item label="" style="margin: 0">
          <el-button type="primary" @click="handleSubmitForm('aForm')">保存</el-button>
          <el-button @click="handleResetForm('aForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="LevelModalShow" :width="!isShow ? '360px' : '50%'">
      <div v-if="!isShow">
        <div style="
        display: flex;
        justify-content: space-between;
        align-items: center;
      ">
          <div>会员等级</div>
          <el-select v-model="memberLevel" placeholder="请选择会员等级">
            <el-option v-for="item in selectItem" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 24px">
          <el-button type="primary" style="width: 100%" @click="updateMemberLevel">确认</el-button>
        </div>
      </div>

      <div v-else>
        <el-table :data="gridData">
          <el-table-column property="time" label="日期" width="200"></el-table-column>
          <el-table-column property="memberName" label="姓名" width="180"></el-table-column>
          <el-table-column property="type" label="流水类型" align="center">
            <template slot-scope="scope">
              <div>
                {{ handleTypeInfo(scope.row.type) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="type" label="流水" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 1 || scope.row.type == 2">
                <span type="danger" style="color: #d43030">
                  - {{ scope.row.amount }}
                </span>
              </div>
              <div v-else>
                <span type="success" style="color: #ffc300">
                  + {{ scope.row.amount }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChangeSmall" @current-change="handleCurrentChangeSmall"
          :current-page.sync="pageInfoSmall.currentPage" :page-sizes="[10, 20, 30, 40]"
          :page-size="pageInfoSmall.pageSize" layout="sizes, prev, pager, next" :total="pageInfoSmall.total">
        </el-pagination>
      </div>
    </el-dialog>
  </div>

</template>

<script>
// 引入公共js代码
import {
  findMemberPage,
  addMember,
  updateBusiness,
  deleteBusiness,
  GetViewWalletFlow,
  updateMemberLevel,
  promotionMember
} from '@/api/business/index'
import { pageMixin } from '@/mixins/pageMixin.js'
export default {
  mixins: [pageMixin],
  methods: {
    handleSizeChangeSmall(val) {
      this.pageInfoSmall.pageSize = val
      // 调用列表
      this.handleGetMyRunningWater()
    },
    handleCurrentChangeSmall(val) {
      this.pageInfoSmall.currentPage = val
      this.handleGetMyRunningWater()
    },
    handleTypeInfo(type) {
      if (type === 1) {
        return '购买商品'
      } else if (type === 2) {
        return '提现'
      } else if (type === 3) {
        return '下级分红'
      } else if (type === 4) {
        return '单元分红'
      } else if (type === 5) {
        return '周月季年分红'
      }
    },
    handleCommand(command, row) {
      switch (command) {
        case 'runningWater':
          this.isShow = true
          this.LevelModalShow = true
          this.title = '查看流水'
          this.memberId = row.id
          this.handleGetMyRunningWater()
          // 点击查看流水 TODO
          break
          case 'level':
          this.isShow = false
          this.memberId = row.id
          this.memberLevel = row.memberLevel
          this.LevelModalShow = true
          this.title = '修改会员等级'
          // 点击修改会员等级 TODO
          break
          case 'business':
          this.$confirm('是否晋升该会员成为商家?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
            center: true
          })
            .then(() => {
              this.promotionMember(row.id) // 发送网络请求方法
            })
            .catch(() => {
              this.$message({
                   type: 'info',
                   message: '已取消'
               });
            })
          // 点击提升为商家 TODO
          break
        default:
          break
      }
    }
  },
  data() {
    return {
      selectItem: [0, 1, 2, 3, 4, 5],// 会员等级列表
      memberId: '',//会员ID
      memberLevel: '', //会员等级
      LevelModalShow: false,//弹窗开关
      gridData: [],// 流水表格数据
      isShow: false, // 流水/会员等级开关
      title: '', // 动态设置弹窗标题
      pageInfoSmall: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      pageSearch: {
        name: '' // 搜索名称数据
      },
      initFormData: {
        authority: 'member', //商户权限会员 member 商家 business
        userName: '', //账号
        nikeName: '', //会员昵称
        realName: '', //真实姓名
        address: '', //店铺地址
        phone: '', //手机号
        bankDeposit: '', //开户行
        bankNumber: '', //银行卡号
        referencePhone: '', //推荐人手机号
        password: ''
      },
      // 表格数据
      pageData: [
        {
          id: 1,
          realName: 'DSAF',
          address: 'DSAF',
          phone: '17582801111',
          referencePhone: null,
          bankDeposit: '农业银行',
          memberLevel: 0,
        },
        // 省略其它重复假数据
      ],
      pageApi: {
        list: findMemberPage,
        add: addMember,
        update: updateBusiness,
        del: deleteBusiness
      }
    }
  },
  async handleGetMyRunningWater() {
    let res = await GetViewWalletFlow({
      memberId: this.memberId,
      currentPage: this.pageInfoSmall.currentPage,
      pageSize: this.pageInfoSmall.pageSize
    })
    if (res.success) {
      this.pageInfoSmall.total = res.pageInfo.total
      this.gridData = res.pageInfo.list
    } else {
      this.$message({
        type: 'error',
        message: res.message
      })
    }
  },
  async updateMemberLevel() {
      let res = await updateMemberLevel({
        memberId: this.memberId,
        level: this.memberLevel
      })
      if (res.success) {
        this.LevelModalShow = false
        // 重新获取新数据
        this.handlePageLoad()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      }
    },
}
</script>
